<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
		<title>小螺号——首页</title>
	</head>

	<link rel="stylesheet" href="font/iconfont.css" />
	<script type="text/javascript" src="dist/lib/jquery-2.1.4.js" ></script>
	<link rel="stylesheet" href="css/css.css" />
	<link rel="stylesheet" href="dist/lib/weui.min.css">
	<link rel="stylesheet" href="dist/css/jquery-weui.min.css">
	<script src="dist/js/jquery-weui.min.js"></script>
	<script src="js/jquery.SuperSlide.2.1.1.js"></script>
	
	
<style>
.index-layer{
position: fixed;
top: 50%;
left: 50%;
width:80%;
height:55%;  
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
border-radius:10px;
background-color:#FD295B;
}
.index-layer_colse{}
.box-bg{ width: 100%; height: 100%;position:fixed;background:rgba(0,0,0,0.7);z-index:10000;}
.index-layer{padding:10px; text-align: center;color: #fff;display: block;}
.index-layer h1,.index-layer h2{ font-size:0.9rem;font-weight: normal;letter-spacing:2px; width: 100%; padding-bottom: 10px;}
.index-layer h2{color:#FD295B; padding:5px;}
.index-layer .close{font-size:1.2rem;right:10px;top:0px;position: absolute;}
.index-layer .yaoqing_list{font-weight:normal;background-color: #fff;color:#FDBB97;border-radius: 10px;overflow: hidden;padding:0px 0px 15px 0px;}
.index-layer .yaoqing_total{ padding-bottom:10px; color:#FEE9E4;}
.index-layer .col-1{color:#575757;}
.index-layer .col-2{color:#333;}
.index-layer .yaoqing_total .weui-col-50{font-size:0.6rem!important;padding: 5px 0px;}
.layer-list{ width:100%; font-size:0.65rem;}
.layer-list th{font-weight: normal;color:#FD295B;font-size: 0.6rem; text-align:center;}
.layer-list td{font-weight: normal;color:#FD295B;font-size: 0.6rem; padding:2px;}
.layer-list i{background-color:#FDB5B6;border-radius: 2px; width:0.8rem; height:0.8rem;color:#DA6E4C;font-size:0.6rem; margin: 0 auto;
vertical-align:middle;display: block;line-he.s-totalight: 0.8rem;
}
  </style>
<body>
	<script>
		$(document).ready(function(){
			$("body").css({"position":"fixed"});
			$(".index-layer").show(300,function(){
				var div1 = $(".index-layer").height();
				var div2 = $(".wbox").height();
				div3 = div1 - div2 - 15;
				$(".yaoqing_list").height(div3);
			});
		});
		$(document).on("click",".index-layer .close",function(){
	 		$(".box-bg").hide();
	 		$("body").attr("style","position:none;");		
		})
	</script>
	<!--弹出开始-->
	<div class="box-bg">
		<div class="index-layer" style="display: none;">
			<div class="wbox">
				<h1 class="center-block">今日邀请头条<i class="iconfont icon-guanbi close"></i></h1>
				<div class="weui-row yaoqing_total">
					<div class="weui-col-50">昨日邀请：0人</div>
					<div class="weui-col-50">累计邀请：0人</div>
					<div class="weui-col-50">昨日奖励：0.00金币</div>
					<div class="weui-col-50">累计奖励：0.00金币</div>
				</div>
			</div>
			<div class="weui-row yaoqing_list">
				<h2>邀请风云榜</h2>
				<div>
					
				</div>
				<table class="layer-list">
					<thead>
						<th>排名</th>
						<th>会员名称</th>
						<th>邀请人数</th>
						<th>累计奖励</th>
					</thead>
					<tbody>
						<tr>
							<td><i>1</i></td>
							<td style="color: #333;">137***0962</td>
							<td>28545</td>
							<td>2002566.23<br/>金币</td>
						</tr>
						<tr>
							<td><i>2</i></td>
							<td style="color: #333;">137***0962</td>
							<td>28545</td>
							<td>2002566.23<br/>金币</td>
						</tr>
						<tr>
							<td><i>3</i></td>
							<td style="color: #333;">137***0962</td>
							<td>28545</td>
							<td>2002566.23<br/>金币</td>
						</tr>
						<tr>
							<td colspan="4"><button type="button" class="weui-btn index-tg-btn">去邀请</button></td>
						</tr>
					</tbody> 
				</table>
				
			</div>
		</div>
	</div>
	

<!--header-->
<div class="s-title">赚零花</div>
<div class="bg-1">
	<!--轮播图-->
		<div class="s-total">

		<div class="z-shouyi weui-row">
			<div class="weui-c">
				<p class="iconfont icon-zhu"></p>
				<p class="font-14">佣金收益(金)</p>
				<p class="font-20">2.80</p>
			</div>
			<div class="weui-c">
				<p class="iconfont icon-yongjin1"></p>
				<p class="font-14">本金收益(金)</p>
				<p class="font-20">0.00</p>
			</div>
		</div>
		<div class="today-shouyi weui-row">
			<div class="weui-c">
				<p class="font-14"><i class="iconfont icon-renwu"></i>任务收入</p>
				<p class="font-12">今日收入2.80金</p>
			</div>
			<div class="weui-c">
				<p class="font-14"><i class="iconfont icon-buchongiconsvg05"></i>推广奖励</p>
				<p class="font-12">今日收入2.80金</p>
			</div>
		</div>
	</div>

	
	<!--收入-->
	
		<div class="swiper-container">
	    <!-- Additional required wrapper -->
	    <div class="swiper-wrapper">
	    <!-- Slides -->
		    <div class="swiper-slide">
		    	<a href="活动.html">
		    	<img src="img/banner2.jpg" />
		    	</a>
		    </div>
		    <div class="swiper-slide"><a href="活动.html"><img src="img/banner3.jpg" /></a></div>
		    <div class="swiper-slide"><a href="活动.html"><img src="img/banner2.jpg" /></a></div>
	    </div>
	    <!-- If we need pagination -->
	    <div class="swiper-pagination"></div>
	</div>
	<script src="dist/js/swiper.js"></script>
	<script>
	      $(".swiper-container").swiper({
	        loop: true,
	        autoplay: 3000
	      });
	</script>
		
		
		
	<!--gg-->
	<article class="ggbox">
		<div class="gg-img">
			<span><img width="40" src="img/ggicon.png"/></span>
		</div>
		<div class="gg-tit">
			<div class="txtMarquee-left">
				<div class="bd">
					<ul class="infoList">
						<li>
							<a href="" target="_blank">推广奖励推广奖励推广奖励</a>
						</li>
						<li>
							<a href="" target="_blank">推广奖励推广奖励推广奖励</a>
						</li>
						<li>
							<a href="" target="_blank">推广奖励推广奖励推广奖励</a>
						</li>
						<li>
							<a href="" target="_blank">推广奖励推广奖励推广奖励</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</article>
	<script type="text/javascript">
		jQuery(".txtMarquee-left").slide({
			mainCell: ".bd ul",
			autoPlay: true,
			effect: "leftMarquee",
			vis: 2,
			interTime: 50
		});
	</script>
</div>	
<!--首页列表-->
<div class="weui-cells index-list mt5">
	<a class="weui-cell weui-cell_access" href="javascript:;" style="padding:5px 10px;">
		<div class="weui-cell__hd">
			<img src="img/index-icon1.png" style="width:40px;margin-right:10px;display:block"></div>
		<div class="weui-cell__bd">
			<h4 class="weui-media-box__title">新手任务<i>(完成新手任务里领取新手奖励！)</i></h4>
		</div>
		<span class="weui-cell__ft"></span>
	</a>
	<a class="weui-cell weui-cell_access" href="javascript:;" style="padding:5px 10px;">
		<div class="weui-cell__hd">
			<img src="img/index-icon2.png" style="width:40px;margin-right:10px;display:block"></div>
		<div class="weui-cell__bd">
			<h4 class="weui-media-box__title">新手教学<i>(新手人员可以先学习新手教程！)</i></h4>
		</div>
		<span class="weui-cell__ft"></span>
	</a>
</div>
<div class="weui-row">
	<a href="接任务.html" class="index-btn">接单</a>
</div>
<div class="bottom-block"></div>
<!--footer-->
		<div class="weui-tabbar">
			<a href="首页.html" class="weui-tabbar__item weui-bar__item--on">
				<div class="weui-tabbar__icon">
					<i class="iconfont icon-home"></i>
				</div>
				<p class="weui-tabbar__label">首页</p>
			</a>
			<a href="商品列表.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<i class="iconfont icon-renwu"></i>
				</div>
				<p class="weui-tabbar__label">已接任务</p>
			</a>
			<a href="分类.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon ">
					<i class="iconfont icon-xinxi2"></i>
				</div>
				<p class="weui-tabbar__label">申诉中心</p>
			</a>
			<a href="分类.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon ">
					<i class="iconfont icon-huodongzhongxin"></i>
				</div>
				<p class="weui-tabbar__label">活动中心</p>
			</a>
			<a href="个人中心.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<i class="iconfont icon-wode2"></i>
				</div>
				<p class="weui-tabbar__label">我的</p>
			</a>
		</div>
</div>
</body>
</html>